<template>
  <div class="main-container color">
    <a-tabs default-active-key="1" @tab-click="tabClick">
      <a-tab-pane key="1" title="卡板入库">
        <a-row class="grid-demo" style="backgroundcolor: var(--color-fill-2)">
          <a-col :span="8" :offset="8">
            <a-form
              class="huakaClass"
              ref="cardRef"
              :model="cardForm"
              :auto-label-width="true"
              @submit="submit"
            >
              <a-form-item label="导入方式" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" class="centerssssss">
                    <a-radio v-model="checked1" value="orderly">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title"></div>
                        </div>
                      </template>
                    </a-radio>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addApiCard"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked1 == 'orderly' ? true : false,
                          message: '请输入开始接口卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="cardForm.addApiCard"
                        :disabled="checked1 == 'orderly' ? false : true"
                        placeholder="请输入开始接口卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endApiCard"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked1 == 'orderly' ? true : false,
                          message: '请输入结束接口卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="cardForm.endApiCard"
                        :disabled="checked1 == 'orderly' ? false : true"
                        placeholder="请输入结束接口卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addIccid"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked1 == 'orderly' ? true : false,
                          message: '请输入开始完整卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="cardForm.addIccid"
                        :disabled="checked1 == 'orderly' ? false : true"
                        placeholder="请输入开始完整卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endIccid"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked1 == 'orderly' ? true : false,
                          message: '请输入结束完整卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="cardForm.endIccid"
                        :disabled="checked1 == 'orderly' ? false : true"
                        placeholder="请输入结束完整卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addCard"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked1 == 'orderly' ? true : false,
                          message: '请输入开始显示卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="cardForm.addCard"
                        :disabled="checked1 == 'orderly' ? false : true"
                        placeholder="请输入开始显示卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endCard"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked1 == 'orderly' ? true : false,
                          message: '请输入结束显示卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="cardForm.endCard"
                        :disabled="checked1 == 'orderly' ? false : true"
                        placeholder="请输入结束显示卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" hide-asterisk :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" class="centerssssss">
                    <a-radio v-model="checked1" value="disOrder">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title"></div>
                        </div>
                      </template>
                    </a-radio>
                  </a-col>
                  <a-col :span="10">
                    <a-button class="width100" @click="exportCard">下载入库模板</a-button>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-upload
                      ref="sslU"
                      :data="{
                        remarks: cardForm.remarks,
                      }"
                      :action="
                        warehousingExcel +
                        '?seriesId=' +
                        cardForm.seriesId +
                        '&userId=' +
                        cardForm.userId
                      "
                      :limit="1"
                      :file-list="listssa"
                      @success="onSsl"
                      @error="onError"
                      :auto-upload="false"
                    >
                      <template #upload-button>
                        <a-button style="width: 100%" type="primary" class="width100"
                          >导入入库文件</a-button
                        >
                      </template>
                    </a-upload>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="seriesId"
                label="入库系列"
                hide-asterisk
                :content-flex="false"
                :merge-props="false"
                :rules="[{ required: true, message: '请选择系列' }]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-select
                      v-model="cardForm.seriesId"
                      placeholder="请选择入库系列"
                      allow-clear
                      allow-search
                    >
                      <a-option v-for="item in series" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="userId"
                label="所属客户"
                hide-asterisk
                :content-flex="false"
                :merge-props="false"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-select
                      v-model="cardForm.userId"
                      placeholder="请选择所属客户"
                      allow-clear
                      allow-search
                      :options="userList"
                      :virtual-list-props="{ height: 200 }"
                  /></a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="remarks"
                label="入库备注"
                hide-asterisk
                :content-flex="false"
                :merge-props="false"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-input v-model="cardForm.remarks" placeholder="请输入入库备注" allow-clear />
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-button html-type="submit" :loading="loadings" type="primary" class="width100"
                      >确认入库</a-button
                    >
                  </a-col>
                </a-row>
              </a-form-item>
            </a-form>
            <a-divider type="dashed" :margin="20">常见问题</a-divider>
            <a-collapse>
              <a-collapse-item header="第一次使用卡板入库需要注意什么？" key="1">
                <div
                  >首次入库建议使用文档入库，仔细查看入库文档内的提示，或在系统售后群发消息，进行指导入库
                </div>
              </a-collapse-item>
              <a-collapse-item header="卡板入库的几种卡号分别是什么意思？" key="2">
                <div
                  >接口卡号：一般为填写ICCID【如果ICCID调用接口不行或者没有ICCID请咨询调用接口需要哪个卡号】；ICCID：填写对应ICCID；显示卡号：填写对应短号；实名卡号：填写移动的144卡号【只有移动卡需要填写实名卡号】；IMEI：卡绑定的对应设备的IMEI
                </div>
              </a-collapse-item>
              <a-collapse-item header="用输入方式入库，哪种卡号会入库不成功？" key="3">
                <div>
                  卡号的第一位是0的，卡号带字母的，都不能入库成功，这两种必须使用文档入库。</div
                >
              </a-collapse-item>
            </a-collapse>
          </a-col>
        </a-row>
      </a-tab-pane>
      <a-tab-pane key="2" title="卡板矫正">
        <a-row class="grid-demo" style="backgroundcolor: var(--color-fill-2)">
          <a-col :span="8" :offset="8">
            <a-form
              class="huakaClass"
              ref="correctRef"
              :model="correctForm"
              :auto-label-width="true"
              @submit="submits"
            >
              <a-form-item label="矫正方式" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" class="centerssssss">
                    <a-radio v-model="checked1" value="orderly">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title"></div>
                        </div>
                      </template>
                    </a-radio>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addId"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked1 == 'orderly' ? true : false,
                          message: '请输入开始ID',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="correctForm.addId"
                        :disabled="checked1 == 'orderly' ? false : true"
                        placeholder="请输入开始ID"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endId"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked1 == 'orderly' ? true : false,
                          message: '请输入结束ID',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="correctForm.endId"
                        :disabled="checked1 == 'orderly' ? false : true"
                        placeholder="请输入结束ID"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addApiCard"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked1 == 'orderly' ? true : false,
                          message: '请输入开始接口卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="correctForm.addApiCard"
                        :disabled="checked1 == 'orderly' ? false : true"
                        placeholder="请输入开始接口卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endApiCard"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked1 == 'orderly' ? true : false,
                          message: '请输入结束接口卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="correctForm.endApiCard"
                        :disabled="checked1 == 'orderly' ? false : true"
                        placeholder="请输入结束接口卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addIccid"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked1 == 'orderly' ? true : false,
                          message: '请输入开始完整卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="correctForm.addIccid"
                        :disabled="checked1 == 'orderly' ? false : true"
                        placeholder="请输入开始完整卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endIccid"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked1 == 'orderly' ? true : false,
                          message: '请输入结束完整卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="correctForm.endIccid"
                        :disabled="checked1 == 'orderly' ? false : true"
                        placeholder="请输入结束完整卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addCard"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked1 == 'orderly' ? true : false,
                          message: '请输入开始显示卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="correctForm.addCard"
                        :disabled="checked1 == 'orderly' ? false : true"
                        placeholder="请输入开始显示卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endCard"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked1 == 'orderly' ? true : false,
                          message: '请输入结束显示卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="correctForm.endCard"
                        :disabled="checked1 == 'orderly' ? false : true"
                        placeholder="请输入结束显示卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" hide-asterisk :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" class="centerssssss">
                    <a-radio v-model="checked1" value="disOrder">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title"></div>
                        </div>
                      </template>
                    </a-radio>
                  </a-col>
                  <a-col :span="10">
                    <a-button class="width100" @click="exportCards">下载矫正模板</a-button>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-upload
                      ref="sslUs"
                      :action="correctExcel"
                      @success="onSsls"
                      @error="onError"
                      :limit="1"
                      :file-list="listss"
                      :start-icon="cancelIcon"
                      :auto-upload="false"
                    >
                      <template #upload-button>
                        <a-button style="width: 100%" type="primary" class="width100"
                          >导入矫正文件</a-button
                        >
                      </template>
                    </a-upload>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-button html-type="submit" :loading="loadings" type="primary" class="width100"
                      >确认矫正</a-button
                    >
                  </a-col>
                </a-row>
              </a-form-item>
            </a-form>
            <a-divider type="dashed" :margin="20">常见问题</a-divider>
            <a-collapse>
              <a-collapse-item header="卡板矫正的使用方法" key="1">
                <div
                  >下载矫正模板，输入卡板ID，卡板ID在卡板列表第一列，然后输入要矫正的卡号，导入矫正矫正文档，即可完成矫正
                </div>
              </a-collapse-item>
            </a-collapse>
          </a-col>
        </a-row>
      </a-tab-pane>
      <a-tab-pane key="3" title="智能矫正">
        <a-row class="grid-demo" style="backgroundcolor: var(--color-fill-2)">
          <a-col :span="8" :offset="8">
            <a-form
              class="huakaClass"
              ref="correctRefs"
              :model="correctForms"
              :auto-label-width="true"
              @submit="submits1"
            >
              <a-form-item label="矫正方式" :content-flex="false" :merge-props="false">
                <a-row :gutter="24" style="margin-bottom: 20px">
                  <a-col :span="2" class="centerssssss">
                    <a-radio v-model="checked2" value="1">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title"></div>
                        </div>
                      </template>
                    </a-radio>
                  </a-col>
                  <a-col :span="22">
                    <a-form-item
                      field="seriesId"
                      hide-asterisk
                      :rules="[{ required: checked2 == '1' ? true : false, message: '请选择系列' }]"
                      :validate-trigger="['change', 'input']"
                      no-style
                      asterisk-position="end"
                    >
                      <a-select
                        v-model="correctForms.seriesId"
                        :disabled="checked2 == '1' ? false : true"
                        placeholder="请选择系列"
                        allow-clear
                      >
                        <a-option v-for="item in series" :key="item.id" :value="item.id">{{
                          item.name
                        }}</a-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row :gutter="24" style="margin-bottom: 20px">
                  <a-col :span="2" class="centerssssss">
                    <a-radio v-model="checked2" value="2">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title"></div>
                        </div>
                      </template>
                    </a-radio>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addCard"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked2 == '2' ? true : false,
                          message: '请输入开始卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="correctForms.addCard"
                        :disabled="checked2 == '2' ? false : true"
                        placeholder="请输入开始卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endCard"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked2 == '2' ? true : false,
                          message: '请输入结束卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="correctForms.endCard"
                        :disabled="checked2 == '2' ? false : true"
                        placeholder="请输入结束卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row :gutter="24">
                  <a-col :span="2" class="centerssssss">
                    <a-radio v-model="checked2" value="3">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title"></div>
                        </div>
                      </template>
                    </a-radio>
                  </a-col>
                  <a-col :span="22">
                    <a-form-item
                      hide-asterisk
                      field="cardMultiline"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked2 == '3' ? true : false,
                          message: '请输入卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-textarea
                        :auto-size="{
                          minRows: 10,
                        }"
                        v-model="correctForms.cardMultiline"
                        :disabled="checked2 == '3' ? false : true"
                        placeholder="请输入卡号，一行一个"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-form-item hide-asterisk field="addId" validate-trigger="input" no-style>
                      <a-row :gutter="24" justify="space-between">
                        <a-col :span="7">
                          <a-checkbox v-model="correctForms.apiCardTypes"> 接口卡号</a-checkbox>
                        </a-col>
                        <a-col :span="13" style="display: flex; justify-content: end">
                          <a-radio-group v-model="correctForms.apiCardType">
                            <a-radio
                              :disabled="correctForms.apiCardTypes == false ? true : false"
                              :value="1"
                            >
                              <template #radio="{ checked }">
                                <div
                                  style="display: flex"
                                  :class="{ 'custom-radio-card-checked': checked }"
                                >
                                  <div className="custom-radio-card-mask">
                                    <div className="custom-radio-card-mask-dot"></div> </div
                                  ><div className="custom-radio-card-title">完整卡号</div>
                                </div>
                              </template>
                            </a-radio>
                            <a-radio
                              :disabled="correctForms.apiCardTypes == false ? true : false"
                              :value="0"
                            >
                              <template #radio="{ checked }">
                                <div
                                  style="display: flex"
                                  :class="{ 'custom-radio-card-checked': checked }"
                                >
                                  <div className="custom-radio-card-mask">
                                    <div className="custom-radio-card-mask-dot"></div> </div
                                  ><div className="custom-radio-card-title">显示卡号</div>
                                </div>
                              </template>
                            </a-radio>
                          </a-radio-group>
                        </a-col>
                      </a-row>
                      <a-row :gutter="24" justify="space-between">
                        <a-col :span="7">
                          <a-checkbox v-model="correctForms.iccidTypes"> 完整卡号</a-checkbox>
                        </a-col>
                        <a-col :span="13" style="display: flex; justify-content: end">
                          <a-radio-group
                            :disabled="correctForms.iccidTypes == false ? true : false"
                            v-model="correctForms.iccidType"
                          >
                            <a-radio
                              :disabled="correctForms.iccidTypes == false ? true : false"
                              :value="1"
                            >
                              <template #radio="{ checked }">
                                <div
                                  style="display: flex"
                                  :class="{ 'custom-radio-card-checked': checked }"
                                >
                                  <div className="custom-radio-card-mask">
                                    <div className="custom-radio-card-mask-dot"></div> </div
                                  ><div className="custom-radio-card-title">接口卡号</div>
                                </div>
                              </template>
                            </a-radio>
                            <a-radio
                              :disabled="correctForms.iccidTypes == false ? true : false"
                              :value="0"
                            >
                              <template #radio="{ checked }">
                                <div
                                  style="display: flex"
                                  :class="{ 'custom-radio-card-checked': checked }"
                                >
                                  <div className="custom-radio-card-mask">
                                    <div className="custom-radio-card-mask-dot"></div> </div
                                  ><div className="custom-radio-card-title">显示卡号</div>
                                </div>
                              </template>
                            </a-radio>
                          </a-radio-group>
                        </a-col>
                      </a-row>
                      <a-row :gutter="24" justify="space-between">
                        <a-col :span="7">
                          <a-checkbox v-model="correctForms.cardTypes"> 显示卡号</a-checkbox>
                        </a-col>
                        <a-col :span="13" style="display: flex; justify-content: end">
                          <a-radio-group
                            :disabled="correctForms.cardTypes == false ? true : false"
                            v-model="correctForms.cardType"
                          >
                            <a-radio
                              :disabled="correctForms.cardTypes == false ? true : false"
                              :value="1"
                            >
                              <template #radio="{ checked }">
                                <div
                                  style="display: flex"
                                  :class="{ 'custom-radio-card-checked': checked }"
                                >
                                  <div className="custom-radio-card-mask">
                                    <div className="custom-radio-card-mask-dot"></div> </div
                                  ><div className="custom-radio-card-title">接口卡号</div>
                                </div>
                              </template>
                            </a-radio>
                            <a-radio
                              :disabled="correctForms.cardTypes == false ? true : false"
                              :value="0"
                            >
                              <template #radio="{ checked }">
                                <div
                                  style="display: flex"
                                  :class="{ 'custom-radio-card-checked': checked }"
                                >
                                  <div className="custom-radio-card-mask">
                                    <div className="custom-radio-card-mask-dot"></div> </div
                                  ><div className="custom-radio-card-title">完整卡号</div>
                                </div>
                              </template>
                            </a-radio>
                          </a-radio-group>
                        </a-col>
                      </a-row>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>

              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-button html-type="submit" :loading="loadings" type="primary" class="width100"
                      >确认矫正</a-button
                    >
                  </a-col>
                </a-row>
              </a-form-item>
            </a-form>
            <a-divider type="dashed" :margin="20">常见问题</a-divider>
            <a-collapse>
              <a-collapse-item header="智能矫正的使用方法" key="1">
                <div>如果勾选接口卡号，选择完整卡号或者显示卡号后 </div>
              </a-collapse-item>
            </a-collapse>
          </a-col>
        </a-row>
      </a-tab-pane>
    </a-tabs>
    <!-- 提示弹窗 -->
    <a-modal
      v-model:visible="jiancevisible"
      @before-close="jiancevisible = false"
      title="入库结果"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <p style="text-align: center; font-size: 16px">{{ names }}卡号数据： </p>
      <p style="text-align: center; margin-top: 20px; font-size: 16px"
        >总{{ names }}卡号：<span style="color: #3491fa">{{ jianceForm.total }}张</span>，可{{
          names
        }}卡号：<span style="color: #3491fa">{{ jianceForm.success }}张</span>，不可{{
          names
        }}卡号：<span style="color: #3491fa">{{ jianceForm.error }}张</span></p
      >
    </a-modal>
    <!-- 提示弹窗 -->
    <a-modal
      v-model:visible="jiancevisible1"
      @before-close="jiancevisible1 = false"
      title="矫正结果"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <p style="text-align: center; font-size: 16px">{{ names }}卡号数据： </p>
      <p style="text-align: center; margin-top: 20px; font-size: 16px"
        >总{{ names }}卡号：<span style="color: #3491fa">{{ jianceForm.total }}张</span>，可{{
          names
        }}卡号：<span style="color: #3491fa">{{ jianceForm.success }}张</span>，不可{{
          names
        }}卡号：<span style="color: #3491fa">{{ jianceForm.error }}张</span></p
      >
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import {
    warehousingOrderly,
    warehousingExcel,
    resourceExcel,
    resourceExcels,
    correctOrderly,
    correctExcel,
    intelligenceSeries,
    intelligenceSeries2,
    intelligenceSeries3,
  } from '@/api/url'
  import { formpost, post } from '@/api/http'
  import { Message, Modal } from '@arco-design/web-vue'
  import { onMounted, ref } from 'vue'
  import useCommonStore from '@/store/modules/common'
  const useCommon = useCommonStore()
  const checked1: any = ref('disOrder')
  const checked2: any = ref('1')
  const series: any = ref([])
  const userList: any = ref([])
  const cardRef: any = ref()
  const correctRef: any = ref()
  const correctRefs: any = ref()
  const jiancevisible = ref(false)
  const jianceForm: any = ref({})
  const names: any = ref('')
  const loadings: any = ref(false)
  const listss = ref([])
  const listssa = ref([])
  const sslU = ref()
  const sslUs = ref()
  const jiancevisible1 = ref(false)
  const cardForm: any = ref({
    addCard: '',
    endCard: '',
    addIccid: '',
    endIccid: '',
    addApiCard: '',
    endApiCard: '',
    seriesId: '',
    userId: '',
    remarks: '', //备注
  })
  const correctForm: any = ref({
    addId: '',
    endId: '',
    addCard: '',
    endCard: '',
    addIccid: '',
    endIccid: '',
    addApiCard: '',
    endApiCard: '',
  })
  //智能检测
  const correctForms: any = ref({
    seriesId: '',
    addCard: '',
    endCard: '',
    cardMultiline: '',
    cardType: 1,
    cardTypes: false,
    iccidType: 1,
    iccidTypes: false,
    apiCardType: 1,
    apiCardTypes: false,
  })

  const tabClick = () => {
    checked1.value = 'disOrder'
    loadings.value = false
    checked2.value = '1'
  }
  function cancelIcon() {}
  //入库
  const submit = () => {
    cardRef.value?.validate().then((error: any) => {
      if (!error) {
        loadings.value = true
        if (checked1.value == 'disOrder') {
          sslU.value.submit()
        } else {
          post({
            url:
              warehousingOrderly +
              '?seriesId=' +
              cardForm.value.seriesId +
              '&userId=' +
              cardForm.value.userId,
            data: () => {
              return {
                addCard: cardForm.value.addCard,
                endCard: cardForm.value.endCard,
                addIccid: cardForm.value.addIccid,
                endIccid: cardForm.value.endIccid,
                addApiCard: cardForm.value.addApiCard,
                endApiCard: cardForm.value.endApiCard,
                remarks: cardForm.value.remarks,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                names.value = '入库'
                jianceForm.value = res.data
                jiancevisible.value = true
                cardRef.value?.resetFields()
                loadings.value = false
              }
            })
            .catch(() => {
              loadings.value = false
            })
        }
      }
    })
  }
  //矫正
  const submits = () => {
    correctRef.value?.validate().then((error: any) => {
      if (!error) {
        loadings.value = true
        if (checked1.value == 'disOrder') {
          sslUs.value.submit()
        } else {
          post({
            url:
              correctOrderly +
              '?addId=' +
              correctForm.value.addId +
              '&endId=' +
              correctForm.value.endId,
            data: () => {
              return {
                addCard: correctForm.value.addCard,
                endCard: correctForm.value.endCard,
                addIccid: correctForm.value.addIccid,
                endIccid: correctForm.value.endIccid,
                addApiCard: correctForm.value.addApiCard,
                endApiCard: correctForm.value.endApiCard,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                names.value = '矫正'
                jianceForm.value = res.data
                jiancevisible1.value = true
                loadings.value = false
                correctRef.value?.resetFields()
              }
            })
            .catch(() => {
              loadings.value = false
            })
        }
      }
    })
  }

  //矫正
  const submits1 = () => {
    correctRefs.value?.validate().then((error: any) => {
      if (!error) {
        Modal.warning({
          title: '操作确认',
          content: '确定要执行此操作吗？',
          cancelText: '取消',
          titleAlign: 'start',
          hideCancel: false,
          okText: '确认',
          onOk: () => {
            loadings.value = true
            const a = correctForms.value.cardTypes == true ? correctForms.value.cardType : ''
            const b = correctForms.value.iccidTypes == true ? correctForms.value.iccidType : ''
            const c = correctForms.value.apiCardTypes == true ? correctForms.value.apiCardType : ''
            if (checked2.value == '1') {
              formpost({
                url:
                  intelligenceSeries +
                  '?cardType=' +
                  a +
                  '&iccidType=' +
                  b +
                  '&apiCardType=' +
                  c +
                  '&seriesId=' +
                  correctForms.value.seriesId,
                data: () => {
                  return {}
                },
              })
                .then((res) => {
                  if (res.code == 0) {
                    names.value = '矫正'
                    jianceForm.value = res.data
                    jiancevisible1.value = true
                    loadings.value = false
                    correctRefs.value?.resetFields()
                  }
                })
                .catch(() => {
                  loadings.value = false
                })
            } else if (checked2.value == '2') {
              post({
                url:
                  intelligenceSeries2 + '?cardType=' + a + '&iccidType=' + b + '&apiCardType=' + c,
                data: () => {
                  return {
                    addCard: correctForms.value.addCard,
                    endCard: correctForms.value.endCard,
                  }
                },
              })
                .then((res) => {
                  if (res.code == 0) {
                    names.value = '矫正'
                    jianceForm.value = res.data
                    jiancevisible1.value = true
                    loadings.value = false
                    correctRefs.value?.resetFields()
                  }
                })
                .catch(() => {
                  loadings.value = false
                })
            } else {
              formpost({
                url:
                  intelligenceSeries3 + '?cardType=' + a + '&iccidType=' + b + '&apiCardType=' + c,
                data: () => {
                  return {
                    cardMultiline: correctForms.value.cardMultiline,
                  }
                },
              })
                .then((res) => {
                  if (res.code == 0) {
                    names.value = '矫正'
                    jianceForm.value = res.data
                    jiancevisible1.value = true
                    console.log('sss')
                    loadings.value = false
                    correctRef.value?.resetFields()
                  }
                })
                .catch(() => {
                  loadings.value = false
                })
            }
          },
        })
      }
    })
  }

  const exportCard = () => {
    // window.location.href = resourceExcel
    window.location.assign(resourceExcel)
  }

  const exportCards = () => {
    // window.location.href =
    window.location.assign(resourceExcels)
  }

  //上传
  const onSsl = (fileItem: any) => {
    names.value = '入库'
    jianceForm.value = fileItem.response.data
    jiancevisible.value = true
    checked1.value = 'orderly'
    loadings.value = false
    listssa.value = []
    cardRef.value?.resetFields()
    correctRef.value?.resetFields()
  }

  //上传
  const onSsls = (fileItem: any) => {
    names.value = '矫正'
    jianceForm.value = fileItem.response.data
    jiancevisible1.value = true
    checked1.value = 'orderly'
    loadings.value = false
    listss.value = []
    cardRef.value?.resetFields()
    correctRef.value?.resetFields()
  }

  //上传
  const onError = (fileItem: any) => {
    Message.error(fileItem.response.msg)
    loadings.value = false
  }

  function getseries() {
    useCommon.seriess().then((res: any) => {
      series.value = res.data
    })
  }

  function getUser() {
    useCommon.userLists().then((res: any) => {
      userList.value = res.data
    })
  }

  onMounted(async () => {
    await getseries()
    await getUser()
  })
</script>

<style scoped>
  .color {
    background-color: var(--color-bg-1);
    border-radius: 10px;
    padding: 20px;
  }

  :deep(.arco-upload) {
    width: 100%;
  }

  .arco-radio-group :deep(.arco-radio) {
    margin-right: 0px;
  }

  .huakaClass :deep(.arco-form-item-message) {
    margin-left: 42px !important;
  }

  .centerssssss {
    height: 32px;
    display: flex;
    align-items: center;
  }
</style>
